<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import ArticleCard from '@/views/common/article-card/index.vue';
import { viewMore } from '@/utils/constants';
import { queryArticles } from '@/api/articles';
import { IArticleVo } from '@/api/dto/articles';
import { datetimeFormatter } from '@/utils/formatter';

const recommendArticles = ref<(IArticleVo)[]>();
onMounted(async () => {
  recommendArticles.value = (await queryArticles()).slice(0, 3).map(item => ({
    ...item,
    date: datetimeFormatter(item.date),
  }));
});
</script>
<template>
  <div class="recommend-articles">
    <div class="title">推荐文章</div>
    <div class="articles">
      <article-card v-for="(item,index) in recommendArticles" :key="index" :title="item.title"
                    :author-name="item.author" :date="item.date" :url="item.link"
                    :pageViews="item.read_counts"></article-card>
    </div>
    <div class="view-more-btn" @click="viewMore">查看更多</div>
  </div>
</template>
<style lang="less">
.recommend-articles {
  margin: 60px 30px 40px;

  .title {
    margin-bottom: 30px;
    font-size: 42px;
    font-weight: 700;
    color: #042749;
  }

  .articles {
    display: flex;
    flex-direction: column;

    .article-card {
      padding: 30px;
      margin-bottom: 40px;
      border-radius: 8px;

      .article-icon {
        width: 88px;
        height: 88px;
      }

      .article-desc {

        .headline {
          font-size: 30px;
        }

        .creator {
          font-size: 24px;
          margin-top: 20px;

          .divider-line {
            height: 25px;
            width: 1px;
            margin: 0 15px;
          }
        }
      }
    }
  }

  .view-more-btn {
    margin: 20px 0 50px;
    background-color: #042749;
    height: 94px;
    border-radius: 10px;
    text-align: center;
    line-height: 94px;
    font-weight: 600;
    color: #FFFFFF;
    font-size: 30px;
  }
}
</style>
